<template>

  <!-- Geo定位搜索用户 -->
  <div style="margin-top: 20px;margin-left: 10px;font-size: 16px;font-weight: bold;color: black;display: flex;align-items: center;">
    <div style="margin-top: 10px;display: flex;flex-direction: column;align-items: flex-start;margin-right: 10px;">
      <div style="display: flex;align-items: center;">
        <div style="width: 90px;">当前位置:</div>
        <div style="margin-left: 5px;">{{address}}</div>
      </div>
      <div style="display: flex;align-items: center;">
        <div style="width: 90px;">当前经纬度:</div>
        <div style="margin-left: 5px;">{{location}}</div>
      </div>
    </div>
  </div>

  <div style="text-align: center">
    <van-button width="70%" round type="primary" @click="beginSearch" text="定位搜索附近用户" style=";margin-top: 10px" />
  </div>

  <van-divider />

  <div style="margin-top: 10px;margin-left: 10px;font-size: 18px;font-weight: bold;">
    附近的用户：
  </div>

  <div class="gei-circle" style="margin-top: 20px;" v-if="loading">
    <van-loading color="#1989fa"  style="text-align: center;">
      定位查询中...
    </van-loading>
  </div>

  <van-card
      v-else-if="userList.length > 0"
      v-for="user in userList"
            :price="user.planetCode"
            :desc="user.personalProfile"
            :title="`${user.username}<${user.planetCode}>`"
            :thumb="user.avatarUrl"
            currency="⭐️"
            :tag="user.gender === 0 ? '♂' : ' ♀ '"
  >
    <template #tags>
      <van-tag  type="success" plain v-for="tag in user.tags" style="margin-right: 8px;margin-top: 4px">
        {{tag}}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="toUserInfo(user)">联系我</van-button>
    </template>
  </van-card>

  <van-empty image="search" v-if="userList.length === 0 && !loading" >没有找到相关用户</van-empty>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {userStore} from "../stores/user/user.ts";
import { getGeoInfoByIPAndAddress, searchNearbyUsers} from "../api/geoAPi.ts";
const router = useRouter();
const userStoreAPI = userStore();
const location = ref('');
const address = ref('');
const loading = ref(false);
const userList = ref([
  {
    username: '张三',
    planetCode: '123456',
    personalProfile: '这是一个个人简介',
    avatarUrl: 'https://img.yzcdn.cn/vant/user-inactive.png',
    gender: 1,
    tags: ['标签1', '标签2']
  },
  {
    username: '张三',
    planetCode: '123456',
    personalProfile: '这是一个个人简介',
    avatarUrl: 'https://img.yzcdn.cn/vant/user-inactive.png',
    gender: 1,
    tags: ['标签1', '标签2']
  }
]);

const beginSearch = async ()=>{
  loading.value = true;
  const res = await searchNearbyUsers();
  // setTimeout(() => {
  //   loading.value = false;
  // }, 1000);
  if (res.code === 200){
    userList.value = res.data;
    userList.value.forEach((item:any)=>{
      if (item.tags){
        item.tags = JSON.parse(item.tags);
      }
    });
    loading.value = false;
  }
}


//前往用戶信息页面
const toUserInfo = (user:any)=>{
  userStoreAPI.setOtherUserInfo(user);
  router.push('/userInfo');
};

const getIPAddress = async ()=>{
  const res = await getGeoInfoByIPAndAddress();
  if (res.code === 200){
    location.value = res.data?.lngAndLat;
    address.value = res.data?.address;
  }
}

onMounted(()=>{
  getIPAddress();
});

</script>

<style scoped>


@media (max-width: 768px) {
  /* 针对较小屏幕，例如手机 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 针对中等屏幕，例如平板电脑 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}

@media (min-width: 1025px) {
  /* 针对大屏幕，例如桌面电脑 */
  .infinite-list {
    height: 85vh; /* 好像这个80vh就是占比，无论屏幕多大都会占用90？ */
    padding: 0;
    margin-left: 3px;
    margin-right: 10px;
    list-style: none;
    position: fixed;
    width: 98%;
  }
}

.gei-circle :deep(.van-loading .van-loading__text){
  font-size: 25px;
}


</style>